<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="支付宝1" name="first">
      <pay-setting
        :data="dataList['pay1']"
        @submit="onSubmit"
        v-if="isShow"
      ></pay-setting>
    </el-tab-pane>
    <el-tab-pane label="支付宝2" name="second">
      <pay-setting
        :data="dataList['pay2']"
        @submit="onSubmit"
        v-if="isShow"
      ></pay-setting>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import paySetting from "@/components/pay/alipay-setting.vue";
import request from "@/assets/js/request";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";

const activeName = ref("first");
const isShow = ref(false);

const handleClick = (tab, event) => {
  console.log(tab, event);
};

const dataList = ref({});

// const form = reactive({
//   protocol: "https",
//   gatewayHost: "",
//   isAlipay: "1",
//   charset: "utf-8",
//   notifyUrl: "",
//   appPublicKey: "",
//   appPrivateKey: "",
//   appId: "",
//   signType: "RSA2",
// });

const getAlipaySetting = () => {
  request
    .get("/setting/alipay")
    .then((res) => {
      dataList.value = res.data;
      console.log(dataList.value["pay1"]);
      console.log(dataList.value["pay2"]);
      isShow.value = true;
    })
    .catch((err) => {
      ElMessage.error(err.message);
      isShow.value = false;
    });
};

const onSubmit = (data) => {
  request
    .post("/setting/alipay", data)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("保存成功");
        getAlipaySetting();
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

onMounted(() => {
  getAlipaySetting();
});
</script>

<style>
.demo-tabs {
  padding: 30px;
}
</style>
